<template>
  <div class="app-container">
    <!-- 搜索区域使用 collapse transition -->
    <el-collapse-transition>
      <el-card v-show="isFilterVisible" class="search-wrapper filter-card" shadow="hover">
        <div>
          <el-form ref="form" :model="listQuery" :inline="true" label-width="80px">
            <el-form-item label="单据日期:">
              <div class="date-range-container">
                <el-date-picker
                  v-model="listQuery.startDate"
                  type="date"
                  placeholder="起始日期"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  style="width: 140px"
                />
                <span class="date-separator">至</span>
                <el-date-picker
                  v-model="listQuery.endDate"
                  type="date"
                  placeholder="结束日期"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  style="width: 140px"
                />
              </div>
            </el-form-item>

            <el-form-item label="供应商:">
              <el-input
                v-model="listQuery.supplier"
                placeholder=""
                suffix-icon="el-icon-more"
                style="width: 180px"
                clearable
              />
            </el-form-item>

            <el-form-item label="业务员:">
              <el-input
                v-model="listQuery.salesPerson"
                placeholder=""
                suffix-icon="el-icon-more"
                style="width: 150px"
                clearable
              />
            </el-form-item>

            <el-form-item label="商品:">
              <el-input
                v-model="listQuery.product"
                placeholder="按商品编号/名称/条码查询"
                suffix-icon="el-icon-more"
                style="width: 250px"
                clearable
              />
            </el-form-item>

            <el-form-item label="订单状态:">
              <el-select
                v-model="listQuery.status"
                clearable
                placeholder="全部"
                style="width: 120px"
              >
                <el-option label="全部" value="" />
                <el-option label="未入库" value="未入库" />
                <el-option label="部分入库" value="部分入库" />
                <el-option label="已入库" value="已入库" />
                <el-option label="已取消" value="已取消" />
              </el-select>
            </el-form-item>

            <el-form-item label="">
              <el-checkbox v-model="listQuery.hideCompletedOrders">隐藏已完成订单</el-checkbox>
            </el-form-item>

            <el-form-item>
              <el-button
                type="primary"
                size="small"
                style="margin-left: 15px"
                @click="handleFilter"
              >查询</el-button>
              <el-button
                size="small"
                style="margin-left: 10px"
                @click="resetForm"
              >重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </el-collapse-transition>

    <el-card class="main-content-card" shadow="hover">
      <!-- 操作按钮区域 -->
      <div class="table-operations" />

      <!-- 报表标题 - 居中显示，添加渐变背景 -->
      <div class="report-title-container">
        <div class="report-title-centered">采购订单跟踪表</div>
      </div>

      <!-- 功能按钮和日期范围 -->
      <div class="report-header">
        <div class="date-range">
          <!-- 日期: {{ listQuery.startDate }} 至 {{ listQuery.endDate }}
            -->
          <el-button
            type="primary"
            size="small"
            class="filter-trigger"
            @click="isFilterVisible = !isFilterVisible"
          >{{ isFilterVisible ? "收起" : "检索" }}
            <i
              :class="['el-icon-arrow-down', { 'is-reverse': isFilterVisible }]"
            />
          </el-button>
          <el-button type="primary" size="small" icon="el-icon-back" @click="goBack">返回</el-button>
          <el-button type="primary" @click="handleExport">导出</el-button>
          <el-button type="primary" @click="handlePrint">打印</el-button>
        </div>
        <div class="report-actions" />
      </div>

      <!-- 数据表格 -->
      <el-table
        v-loading="loading"
        :data="tableData"
        border
        style="width: 100%"
        element-loading-text="加载中"
        :row-class-name="tableRowClassName"
      >
        <el-table-column prop="productId" label="商品编号" sortable width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.productId }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="productName" label="商品名称" width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.productName }}</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="specification"
          label="规格型号"
          width="100"
        />

        <el-table-column prop="brand" label="品牌" width="80" />

        <el-table-column prop="unit" label="单位" width="80">
          <template slot-scope="scope">
            <span>{{ scope.row.unit }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="orderDate" label="订单日期" sortable width="110">
          <template slot-scope="scope">
            <span>{{ scope.row.orderDate }}</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="orderNumber"
          label="采购订单编号"
          sortable
          width="160"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.orderNumber }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="supplier" label="供应商" sortable width="200">
          <template slot-scope="scope">
            <span>{{ scope.row.supplier }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="salesPerson" label="业务员" sortable width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.salesPerson }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="warehouse" label="仓库" width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.warehouse }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="status" label="状态" width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.status }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="quantity" label="数量" width="80" align="right">
          <template slot-scope="scope">
            <span>{{ scope.row.quantity }}</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="packages"
          label="整件数包"
          width="100"
          align="right"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.packages }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="unitPrice" label="单价" width="80" align="right">
          <template slot-scope="scope">
            <span>{{ scope.row.unitPrice }}</span>
          </template>
        </el-table-column>
      </el-table>

      <!-- 合计行 -->
      <div class="summary-row">
        <div class="summary-label">合计:</div>
        <div class="summary-content" />
        <div class="summary-quantity">{{ totalQuantity }}</div>
      </div>

      <!-- 辅助功能侧边栏 -->
      <div class="side-helper">
        <div class="helper-item">
          <i class="el-icon-s-home" />
        </div>
        <div class="helper-item">
          <i class="el-icon-s-help" />
        </div>
        <div class="helper-item">
          <i class="el-icon-message" />
        </div>
        <div class="helper-item">
          <i class="el-icon-time" />
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'PurchaseOrderTrackingForm',
  data() {
    return {
      listQuery: {
        startDate: '2025-03-01',
        endDate: '2025-03-24',
        supplier: '',
        salesPerson: '',
        product: '',
        status: '',
        hideCompletedOrders: false
      },
      tableData: [
        {
          productId: 'SP0059',
          productName: '海苔',
          specification: '105g*18',
          brand: '',
          unit: '瓶',
          orderDate: '2025-03-01',
          orderNumber: 'GHDD202503010001',
          supplier: 'G00003广州食品批发有限公司',
          salesPerson: '默认仓库',
          warehouse: '默认仓库',
          status: '未入库',
          quantity: 5,
          packages: '小计',
          unitPrice: '',
          isSubtotal: false
        },
        {
          productId: '',
          productName: '',
          specification: '',
          brand: '',
          unit: '',
          orderDate: '',
          orderNumber: '',
          supplier: '',
          salesPerson: '',
          warehouse: '',
          status: '',
          quantity: 5,
          packages: '小计',
          unitPrice: '',
          isSubtotal: true
        },
        {
          productId: 'SP0060',
          productName: '气泡水',
          specification: '105g*18',
          brand: '',
          unit: '瓶',
          orderDate: '2025-03-01',
          orderNumber: 'GHDD202503010001',
          supplier: 'G00003广州食品批发有限公司',
          salesPerson: '默认仓库',
          warehouse: '默认仓库',
          status: '未入库',
          quantity: 5,
          packages: '',
          unitPrice: '',
          isSubtotal: false
        },
        {
          productId: '',
          productName: '',
          specification: '',
          brand: '',
          unit: '',
          orderDate: '',
          orderNumber: '',
          supplier: '',
          salesPerson: '',
          warehouse: '',
          status: '',
          quantity: 5,
          packages: '小计',
          unitPrice: '',
          isSubtotal: true
        },
        {
          productId: 'SP0061',
          productName: '蜜桃味苏打气泡水',
          specification: '105g*18',
          brand: '',
          unit: '瓶',
          orderDate: '2025-03-01',
          orderNumber: 'GHDD202503010001',
          supplier: 'G00003广州食品批发有限公司',
          salesPerson: '默认仓库',
          warehouse: '默认仓库',
          status: '未入库',
          quantity: 5,
          packages: '',
          unitPrice: '',
          isSubtotal: false
        },
        {
          productId: '',
          productName: '',
          specification: '',
          brand: '',
          unit: '',
          orderDate: '',
          orderNumber: '',
          supplier: '',
          salesPerson: '',
          warehouse: '',
          status: '',
          quantity: 5,
          packages: '小计',
          unitPrice: '',
          isSubtotal: true
        },
        {
          productId: 'SP0062',
          productName: '樱花味苏打气泡水',
          specification: '260g*12',
          brand: '',
          unit: '瓶',
          orderDate: '2025-03-01',
          orderNumber: 'GHDD202503010001',
          supplier: 'G00003广州食品批发有限公司',
          salesPerson: '默认仓库',
          warehouse: '默认仓库',
          status: '未入库',
          quantity: 5,
          packages: '',
          unitPrice: '',
          isSubtotal: false
        },
        {
          productId: '',
          productName: '',
          specification: '',
          brand: '',
          unit: '',
          orderDate: '',
          orderNumber: '',
          supplier: '',
          salesPerson: '',
          warehouse: '',
          status: '',
          quantity: 5,
          packages: '小计',
          unitPrice: '',
          isSubtotal: true
        },
        {
          productId: 'SP0063',
          productName: '草莓卷',
          specification: '260g*12',
          brand: '',
          unit: '包',
          orderDate: '2025-03-01',
          orderNumber: 'GHDD202503010001',
          supplier: 'G00003广州食品批发有限公司',
          salesPerson: '默认仓库',
          warehouse: '默认仓库',
          status: '未入库',
          quantity: 5,
          packages: '',
          unitPrice: '',
          isSubtotal: false
        },
        {
          productId: '',
          productName: '',
          specification: '',
          brand: '',
          unit: '',
          orderDate: '',
          orderNumber: '',
          supplier: '',
          salesPerson: '',
          warehouse: '',
          status: '',
          quantity: 5,
          packages: '小计',
          unitPrice: '',
          isSubtotal: true
        }
      ],
      loading: false,
      isFilterVisible: false, // 控制搜索区域的显示/隐藏
      totalQuantity: 55 // 合计数量
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      // 模拟API调用 - 实际项目中替换为真实API
      setTimeout(() => {
        // 获取数据的逻辑
        this.loading = false
      }, 500)
    },
    handleFilter() {
      this.getList()
      this.$message({
        message: '查询条件已更新',
        type: 'success'
      })
    },
    resetForm() {
      this.listQuery = {
        startDate: '2025-03-01',
        endDate: '2025-03-24',
        supplier: '',
        salesPerson: '',
        product: '',
        status: '',
        hideCompletedOrders: false
      }
      this.getList()
    },
    handleExport() {
      this.$message({
        message: '导出功能将在此实现',
        type: 'info'
      })
    },
    handlePrint() {
      this.$message({
        message: '打印功能将在此实现',
        type: 'info'
      })
    },
    goBack() {
      this.$router.go(-1)
    },
    tableRowClassName({ row }) {
      if (row.isSubtotal) {
        return 'subtotal-row'
      }
      return ''
    }
  }
}
</script>

<style scoped lang="scss">
.app-container {
  position: relative;
  padding-bottom: 30px;
}

.search-wrapper {
  margin-bottom: 15px;
}

.date-range-container {
  display: flex;
  align-items: center;
}

.date-separator {
  margin: 0 5px;
}

.table-operations {
  margin-bottom: 15px;
}

.filter-trigger .el-icon-arrow-down {
  margin-left: 5px;
  transition: transform 0.3s;
}

.filter-trigger .el-icon-arrow-down.is-reverse {
  transform: rotate(180deg);
}

/* 居中显示的报表标题 */
.report-title-container {
  background: linear-gradient(to right, #f7f9fb, #e8eef5, #f7f9fb);
  padding: 15px 0;
  margin: -35px -20px 15px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.03);
}

.report-title-centered {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  color: #303133;
  position: relative;

  &:after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(to right, #f7f9fb, #409EFF, #f7f9fb);
    border-radius: 3px;
  }
}

/* 功能按钮和日期范围 */
.report-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.date-range {
  font-size: 14px;
  color: #606266;
}

.report-actions {
  margin-left: 10px;
}

/* 小计行样式 */
.subtotal-row {
  background-color: #f8f8f9;
  color: #606266;
  font-weight: bold;
}

/* 合计行 */
.summary-row {
  display: flex;
  background-color: #fdf6ec;
  padding: 10px 15px;
  font-weight: bold;
  border: 1px solid #ebeef5;
  border-top: none;
}

.summary-label {
  width: 80px;
}

.summary-content {
  flex: 1;
}

.summary-quantity {
  width: 100px;
  text-align: right;
}

/* 辅助功能侧边栏 */
.side-helper {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background-color: #fff;
  box-shadow: -2px 0 6px rgba(0, 0, 0, 0.1);
  z-index: 100;
  border-radius: 4px 0 0 4px;
}

.helper-item {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: #606266;
  border-bottom: 1px solid #eee;
}

.helper-item:hover {
  color: #409eff;
  background-color: #f5f7fa;
}

.helper-item:last-child {
  border-bottom: none;
}
</style>
